<template>
<!--
 * @FileDescription: 告警信息
 * @author Sun Yan
 * @Date $ 
-->
  <module-card-title title="告警信息" class="academy-warning-container">
    <div class="academy-body-warning">
      <div class="academy-body-warning-title">
        <div>姓名</div>
        <div>学工会</div>
        <div>时间</div>
        <div>警告信息</div>
      </div>
      <div class="academy-body-warning-list">
        <div class="academy-body-warning-item"
             :key="index"
             v-for="(item, index) in Array(17).fill({userName: '张三', tel: '001', time: '8:00', warning: '晚归',})">
          <span>{{ item.userName }}</span>
          <span>{{ item.tel }}</span>
          <span>{{ item.time }}</span>
          <span>{{ item.warning }}</span>
        </div>
      </div>
    </div>
  </module-card-title>
</template>
<script>
 /**
  * @description: 方法描述
  * @param {参数类型} 参数名称
  * @param {参数类型} 参数名称
  * @return void
  */
export default {
    name: "academy-warning",
    data(){
        return {
            
        }
    },
    created() {
    
    },
    
    methods: {
    
    }
}
</script>

<style lang="scss">
.academy-warning-container {
  @include wh;
}
.module-card-title-container-slot {
  @include wh;
}
.academy-body-warning {
  padding: var(--mb-1);
  @include wh(100%, calc(100% - 50px));
  overflow-y: auto;
  &-title {
    display: flex;
    border-bottom: 1px solid $com-border-color;
    position: relative;
    padding: .2rem 0;
    &:after {
      top: 5px;
      left: 9.3%;
      @include wh(6px, 6px);
      position: absolute;
      content: ' ';
      border-radius: $com-border-radius-circle;
      border: 3px solid $com-color-error;
    }

    > div {

      flex: 0 0 20%;
      text-align: center;
      //@extend .--smaller-font-size;
      font-size: var(--normal-font-size);

      &:first-child {
        flex: 0 0 20%;
        margin-left: 20%;
      }
    }
  }

  &-item {
    display: flex;
    position: relative;
    &:after {
      top: 8px;
      left: 9.3%;
      @include wh(6px, 6px);
      position: absolute;
      content: ' ';
      border-radius: $com-border-radius-circle;
      border: 3px solid $com-color-bright;
    }

    span {
      @include ellipsisMultiline(1);
      flex: 0 0 20%;
      padding: .2rem 0;
      margin: .2rem 0;
      text-align: center;
      border-bottom: 1px solid $com-border-color;
      font-size: var(--normal-font-size);
      &:first-child {
        flex: 0 0 20%;
        padding-left: 20%;
      }
    }
  }
}
</style>